<template>
  <div class="published-container">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="publishClick" class="publish-btn">
        <i class="el-icon-upload2"></i> 发布{{ cdesciibe }}
      </el-button>
      
      <div class="search-box">
        <el-input
          v-model="searchValue"
          placeholder="请输入商品内容搜索..."
          clearable
          @keyup.enter="handleSearch"
          class="search-input"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          />
        </el-input>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="goods-list">
      <div 
        class="goods-card" 
        v-for="(item, index) in userGoods" 
        :key="index"
      >
        <div class="goods-image">
          <el-image
            :src="item.picture ? $store.state.imgShowRoad + '/file/' + item.picture : require('../assets/img/wutu.gif')"
            fit="cover"
            lazy
          >
            <div slot="error" class="image-error">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        
        <div class="goods-info">
          <h3 class="goods-title" :title="item.title">{{ item.title }}</h3>
          <div class="goods-meta">
            <span class="meta-item">
              <i class="el-icon-user"></i> {{ item.ownName }}
            </span>
          </div>
          <p class="goods-desc">{{ item.content }}</p>
          
          <div class="goods-footer">
            <span class="goods-price">¥{{ item.price }}</span>
            
            <div class="goods-actions">
              <el-tooltip content="编辑" placement="top">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="changeInfo(item.orderId)"
                />
              </el-tooltip>
              
              <el-tooltip content="删除" placement="top">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteInfo(item.orderId)"
                  style="color: #f56c6c"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <Pagination
        @item-click="pageClick"
        :cUrl="url + ctype + '/'"
        :cTotal="total"
        :cPageSize="pageSize"
      />
    </div>
  </div>
</template>

<script>
import { selectOrderById, selectOrderByUsernameAndType } from "../api/order";
import ChangeMessage from "./ChangeMessage.vue";
import DeleteMessage from "./DeleteMessage.vue";
import Pagination from "./Pagination.vue";

export default {
  components: { ChangeMessage, DeleteMessage, Pagination },
  props: {
    ctype: { type: String },
    cdesciibe: { type: String }
  },
  data() {
    return {
      userGoods: [],
      updateGoodInfo: {},
      pageNum: 1,
      searchValue: "",
      total: 0,
      pageSize: 30,
      url: "/order/search/"
    };
  },
  methods: {
    pageClick(item) {
      this.userGoods = item;
    },
    publishClick() {
      this.$router.push("/home/addmessage/publish" + this.ctype).catch(err => err);
    },
    changeInfo(item) {
      this.$store.commit("updateChangedOrderId", item);
      selectOrderById({ order_id: this.$store.state.changedOrderId })
        .then(res => { this.updateGoodInfo = res.data; })
        .catch(console.error);
    },
    deleteInfo(item) {
      this.$store.commit("updateChangedOrderId", item);
    },
    handleSearch() {
      this.getData();
    },
    getData() {
      selectOrderByUsernameAndType({
        ctype: this.ctype,
        pageNum: this.pageNum,
        keys: this.searchValue
      })
        .then(res => {
          this.userGoods = res.data.list;
          this.total = res.data.total;
        })
        .catch(console.error);
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
// 定义颜色变量
@primaryColor: #409EFF;  
@priceColor: #f56c6c;
@textColor: #333;
@secondaryTextColor: #666;
@lightTextColor: #999;
@backgroundColor: #f8f8f8;
@cardBackground: white;
@shadowColor: rgba(0, 0, 0, 0.05);
@hoverShadowColor: rgba(0, 0, 0, 0.1);

// 文字截断混入
.text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-multi(@lines) {
  display: -webkit-box;
  display: -moz-box;
  -webkit-line-clamp: @lines;
  -moz-line-clamp: @lines;
  line-clamp: @lines;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.published-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: @backgroundColor;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 @shadowColor;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: @cardBackground;
  border-radius: 6px;
  box-shadow: 0 1px 4px @shadowColor;
  
  .publish-btn {
    padding: 10px 20px;
    font-weight: 500;
    
    i {
      margin-right: 5px;
    }
  }
  
  .search-box {
    width: 350px;
    max-width: 100%;
    
    /deep/ .el-input__inner {
      border-radius: 20px 0 0 20px;
    }
    
    /deep/ .el-input-group__append {
      border-radius: 0 20px 20px 0;
      background: @primaryColor;
      color: white;
      border: none;
      cursor: pointer;
      
      &:hover {
        opacity: 0.9;
      }
    }
  }
}

.goods-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.goods-card {
  display: flex;
  flex-direction: column;
  background: @cardBackground;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px @shadowColor;
  transition: transform 0.3s, box-shadow 0.3s;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px @hoverShadowColor;
  }
  
  .goods-image {
    width: 100%;
    height: 180px;
    
    .el-image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    .image-error {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      color: @lightTextColor;
      font-size: 40px;
    }
  }
  
  .goods-info {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    
    .goods-title {
      margin: 0 0 10px;
      font-size: 16px;
      font-weight: 600;
      color: @textColor;
      .text-ellipsis();
    }
    
    .goods-meta {
      margin-bottom: 8px;
      font-size: 12px;
      color: @lightTextColor;
      
      .meta-item {
        margin-right: 15px;
        
        i {
          margin-right: 3px;
        }
      }
    }
    
    .goods-desc {
      flex: 1;
      margin: 0 0 10px;
      font-size: 14px;
      color: @secondaryTextColor;
      line-height: 1.5;
      .text-ellipsis-multi(3);
    }
    
    .goods-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .goods-price {
        font-size: 18px;
        font-weight: bold;
        color: @priceColor;
      }
      
      .goods-actions {
        button {
          padding: 5px;
          font-size: 16px;
        }
      }
    }
  }
}

.pagination-wrapper {
  padding: 20px 0;
  text-align: center;
  background: @cardBackground;
  border-radius: 6px;
  box-shadow: 0 1px 4px @shadowColor;
}
</style>